<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title><!-- Insert your title here --></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
    <script type="text/javascript" src="../ui.toaster.js"></script>
    <script type="text/javascript">
      $(function(){
        i = 0;
        $("#tr").click(function(){
          i++;
          $("body").toaster({name: 'test'+i, position: 0});
        });
        $("#tl").click(function(){
          i++;
          $("body").toaster({name: 'test'+i, position: 1});
        });
        $("#br").click(function(){
          i++;
          $("body").toaster({name: 'test'+i, position: 2});
        });
        $("#bl").click(function(){
          i++;
          $("body").toaster({name: 'test'+i, position: 3});
        });
        
        $("#closable").click(function(){
          i++;
          $("body").toaster({name: 'test'+i, data:"You can, if you wish, close me. But if you don't i'll just run away.", closable: true});
        });
        $("#closableReq").click(function(){
          i++;
          $("body").toaster({name: 'test'+i, data: "You Need To Close Me, I won't Disappear You Know.", closable: true, requireClose: true});
        });
        $("#closableReqIMG").click(function(){
          i++;
          $("body").toaster({name: 'test'+i, data: '<img src="http://dev.jquery.com/view/trunk/plugins/ui/tests/images/clock.png" alt="clock" />You Need To Close Me, I won\'t Disappear You Know.', closable: true, requireClose: true});
        });
      });
    </script>
    <style>
    @import "blueprint/screen.css";
    .toaster {
      position:absolute;
      width:200px;
    }
    .toaster.br {
      right:4px;bottom:5px;
    }
    .toaster.bl {
      left:4px;bottom:5px;
    }
    .toaster.tr {
      right:4px;top:5px;
    }
    .toaster.tl {
      left:4px;top:5px;
    }
    .toaster .toast {
      width:190px;
      border:1px solid #000;
      margin:4px;
      background:#fff;
    }
    .toaster .toast .toastName {
      position:relative;
      font-weight:bold;
      display:block;
      margin:0px;
      padding:0px;
      background-color:#abc;
    }
    .toaster .toast .toastData {
      display:block;
      margin:0px;
      padding:4px;
    }
    .ui-toast-close {
      cursor:default;
      height:16px;
      width:16px;
      position:absolute;
      top:1px;
      right:3px;
    }
    
    
    #container {
      height:400px;
      padding-right: 9px;
      padding:1.5em;
      margin-right: 0;
      border-right: 1px solid #ddd;
    }
    #container #inner {
      position:relative;
      background:#fff;
      height:100%;
      width:100%;
      border:1px dashed #ddd;
    }
    .notes {background:#fff; padding:2px;}
    button {width:100%;}
    </style>
</head>
<body>
  <div class="container">
    <h1><span class="alt">Test Page: Toaster Popups</span></h1>
      <div class="column span-10 first" id="container">
        <div id="inner"></div>
      </div>
      <div class="column span-3 last">
        <h2>On the Body</h2>
        <hr />
        <button id="tr">top right</button>
        <button id="tl">top left</button>
        <button id="br">bottom right</button>
        <button id="bl">bottom left</button>
        <h2>Closable</h2>
        <button id="closable">Closable</button>
        <button id="closableReq">Closable Require.</button>
        <button id="closableReqIMG">Closable Require + Image</button>
      </div>
      <div class="clear"></div>
  </div>
</body>
</html>